<template>
  <div class="menu-wrapper">
    <!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
    <!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改账户信息</span>
      </div>
      <el-form-item label="公司名称:" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" clearable/>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="公司 ID:" prop="id">-->
        <!--<el-col :span="6">-->
          <!--<span disabled>{{ form.id }}</span>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <!--<el-form-item-->
        <!--label="状态:"-->
        <!--prop="type">-->
        <!--<el-col :span="6">-->
          <!--<el-tag :type="form.status == 1?'success':'info'">-->
            <!--<span>{{ form.status | watchStatus }}</span>-->
          <!--</el-tag>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="Logo:" prop="logo">
        <el-col :span="6">
          <el-image :src="form.logo" style="height:60px; width:60px;"/>
        </el-col>
      </el-form-item>
      <el-form-item label="企业类型:" prop="type">
        <el-col :span="6">
          <el-select style="width: 100%" v-model="form.nature"  placeholder="请选择企业类型">
            <el-option v-for="item in naturelist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="联系人:" prop="linkman">
        <el-col :span="6">
          <el-input v-model="form.linkman" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        <el-col :span="6">
          <el-input v-model="form.phone" clearable/>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="所属账户:" prop="companyName">-->
        <!--<el-col :span="6">-->
          <!--<query-company @queryCompanyClick='queryCompanyClick' :companyName="form.companyName"/>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="所属集团:" prop="groupId">
        <el-col :span="6">
          <query-group @queryGroupClick='queryGroupClick' :groupName="form.groupName" :group-id="form.groupId"/>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址:" prop="address">
        <el-col :span="6">
          <el-input v-model="form.address" clearable/>
        </el-col>
      </el-form-item>
<!--      <el-form-item label="管 理 员:" prop="userId">-->
<!--        <el-col :span="6">-->
<!--          <el-input v-model="form.userId" clearable/>-->
<!--        </el-col>-->
<!--      </el-form-item>-->
      <!--<el-form-item label="审核资料:" prop="meta">-->
        <!--<el-col :span="6">-->
            <!--<el-input v-model="form.meta"></el-input>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <!--<el-form-item prop="metaInfo">-->
        <!--<el-col  :xs="24">-->
<!--&lt;!&ndash;          <security :customerMate='form.meta' :custoemrMateInfo="form.metaInfo" :customerId="form.id"/>&ndash;&gt;-->

                    <!--<el-card>-->
<!--&lt;!&ndash;            <el-tabs v-model="activeTab">&ndash;&gt;-->
              <!--&lt;!&ndash;                                    <el-tab-pane label="基本资料" name="security">&ndash;&gt;-->
              <!--&lt;!&ndash;                                      <account :companyInfo='form'/>&ndash;&gt;-->
              <!--&lt;!&ndash;                                    </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane label="审核资料" name="security">&ndash;&gt;-->
              <!--<security :customerMate='form.meta' :custoemrMateInfo="form.metaInfo" :customerId="form.id"/>-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tabs>&ndash;&gt;-->
          <!--</el-card>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="primary" :loading="clicked" v-permission="['customer.edit']" @click="updateCustomer('form')">修 改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
import {EventBus} from "@/api/eventBus";
import utils from "../../utils/utils.js";
// import Distpicker from "@/components/Distpicker/Distpicker";
import permission from "@/directive/permission/index.js"; // 权限判断指令

import {update, find} from "@/api/customer";
import md5 from "js-md5";
import QueryGroup from "@/components/Query/queryGroup";
import QueryCompany from "@/components/Query/queryCompany";
import Security from "@/views/customer/components/Security";
import officeDialog from '@/components/OfficeDialog'

export default {
  name: "customer-edit",
  directives: {permission},

  filters: {
    // customerId: function(value){
    //   return value.toString();
    // },
    watchType(val) {
      if (val == 1) {
        return '供应商'
      } else {
        return '采购方'
      }
    },
    watchNature(val) {
      if (val == 1) {
        return '贸易公司'
      } else if(val == 2){
        return '零售终端'
      }else{
        return '用油企业'
      }
    },
    watchStatus(val) {
      if (val == 1) {
        return '已认证'
      } else {
        return '未认证'
      }
    },
  },
  components: {
    Security,
    QueryGroup,
    QueryCompany,
    officeDialog,
  },
  data() {
    return {
      activeTab: 'security',
      shippingDate: {},
      companyList: [],
      groupList: [],
      userList: [],
      pageNum: 1,
      pageSize: 20,
      userId: '',
      userName: '',
      clicked: false, // 按钮防双击
      form: {
        id: '',
        name: "",        //公司名称
        logo: "",         //公司Logo
        address: "",	    //详情地址
        linkman: "",	    //联系人
        phone: "",        //联系电话
        companyId: '',    //所属账户
        groupId: '',     //所属集团
        // userId: '',       //管理员
        meta: '',         //审核资料
        metaInfo: {
          chemical: "",
          license: "",
          licenseCode: '',
          other: "",
          wholesale: "",
        },
        msg: "",          //审核说明
        status: 0,        //状态(0.未认证,1.已认证)
        type: null,       //客户类型(1.供应商,2.采购方)
        // createDate :"",   //创建日期
        // modifyDate :"",   //修改日期
      },
      rules: {
        name: [
          {required: true, message: "请输入公司名称", trigger: "blur"},
          {min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur"}
        ],
//        type: [
//          {required: true, message: "请选择公司类型", trigger: "blur"}
//        ],
        linkman: [
          {required: true, message: "请输入联系人", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入联系电话", trigger: "blur"}
        ],
//        companyId: [
//          {required: true, message: "请选择所属账户", trigger: "blur"}
//        ],
        groupId: [
          {required: true, message: "请选择所属集团", trigger: "blur"}
        ],
//        address: [
//          {required: true, message: "请输入详情地址", trigger: "blur"}
//        ],
//        userId: [
//          {required: true, message: "请选择管理员", trigger: "blur"}
//        ],
        // msg:[
        //   { required: true, message: "请输入详情地址", trigger: "blur"}
        // ],
      },
      naturelist: [
        {
          id: 1,
          name: "贸易公司"
        }, {
          id: 2,
          name: "零售终端"
        }, {
          id: 3,
          name: "用油企业"
        }
      ],
    };
  },
  created() {
    var _this = this;
    _this.getData();
//    _this.loadCompany(_this.form.companyId);
//    this.queryCompanyClick(_this.form.companyId);
//    this.queryGroupClick(_this.form.groupId);
//    this.selectType(_this.form.type);
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      if (newVal.name == 'customer-edit' && newVal.query.id != this.id) {
        this.getData()
      }
    },
  },
  methods: {
//    remoteMethod(query) {
//      this.loadCompanyData(query)
//      this.queryCompanyClick()
//      this.queryGroupClick()
//      this.selectType()
//
//    },
//    loadcompanyData(query) {
//      var _this = this;
//      _this.companyList = [];
//      let params = new URLSearchParams();
//      params.append("pageNum", _this.pageNum);
//      params.append("pageSize", _this.pageSize);
//      params.append('id',query.companyId)
//      list(params).then(response => {
//        response.data.data.forEach(item => {
//          let From = {
//            id: item.id,
//            name: item.name
//          }
//          if (item.id == this.form.companyId || this.companyName == '') {
//            this.companyName = item.name;
//            // console.info('comm1',_this.form.communityId)
//          }
//          _this.companyList.push(From)
//        })
//      })
//        .catch(error => {
//          console.log('error!!')
//        });
//    },
    // loadBuilding(query) {
    //   var _this = this;
    //   _this.buildingList = [];
    //   let params = new URLSearchParams();
    //   params.append("pageNum", _this.pageNum);
    //   params.append("pageSize", _this.pageSize);
    //   buildList(params).then(response => {
    //     if (
    //       !utils.isNull(this.form.communityName)
    //       && !utils.isNull(this.form.communityId)
    //     ) {
    //       let form = {};
    //       response.data.data.forEach(item => {
    //         if (item.communityName == _this.form.communityName ||
    //           item.communityId == _this.form.communityId) {
    //           form = item;
    //           _this.buildingList.push(form);
    //         }
    //       })
    //     } else {
    //       _this.buildingList = response.data.data
    //     }
    //   }).catch(error => {
    //     console.log('error!!')
    //   });
    // },
    queryCompanyClick(val) {
      // console.log("选择的是", val)
      this.form.companyId = val.companyId;
      this.form.companyName = val.name;
//      this.companyName = this.form.companyName
      console.log("选择的账户是", this.form.companyName)
    },
    queryGroupClick(val) {
      // console.log("选择的是", val)
      this.form.groupId = val.groupId
      this.form.groupName = val.name
//      this.groupName = this.form.groupName
      console.log("选择的集团是", this.form.groupName)
    },
    getData() {
      this.form.id = this.$route.query.id;
      var _this = this;
      find(_this.form.id)
        .then(response => {
          console.log("请求返回的数据" + JSON.stringify(response));
          if (response.type == "success") {
            // _this.form = response.data.customer;
            _this.form.name = response.data.customer.name;
            _this.form.id = response.data.customer.id;
            _this.form.companyId = response.data.customer.communityId;
            _this.form.linkman = response.data.customer.linkman;
            _this.form.companyName = response.data.company.name;
            _this.form.nature=response.data.customer.nature;
            _this.form.groupId = response.data.customer.groupId;
            if (response.data.group!=null) {
              _this.form.groupName = response.data.group.name;
            }
            _this.form.phone = response.data.customer.phone;
            _this.form.type = response.data.customer.type;
            _this.form.status = response.data.customer.status;
            _this.form.address = response.data.customer.address;
            _this.form.meta = response.data.customer.meta;
            _this.form.metaInfo = response.data.customer.metaInfo;

          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });

          }
        })
        .catch(error => {
        });
    },

    updateCustomer(form) {
      const _this = this;
      console.log("form", this.$refs[form].model);
      // console.log("点击创建了", this.$refs[form],)
      this.$refs[form].validate(valid => {
        console.log("点击创建了", valid)
        if (valid) {
          // 校验表单
          var list = {
            id: _this.form.id,
            name: _this.form.name,
            logo: _this.form.logo,
//            status: _this.form.status,
            groupId: _this.form.groupId,
//            companyId: _this.form.companyId,
//            userId: _this.form.userId,
            phone: _this.form.phone,
            linkman: _this.form.linkman,
            address: _this.form.address,
            meta: _this.form.meta,
//            msg: _this.form.msg,
//            type: _this.query.id,
          }
          _this.clicked = true;
          update(list)
            .then(response => {
              _this.clicked = false;
              if (response.type == "success") {
                let data = response.data;
                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("customer-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({visitedViews}) => {
                    _this.$router.push({
                      path: "/customer/list"
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
                console.log("content", response.content);

              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
//    formatList(data) {
//      data.createDate = this.formatDate2Day(data.createDate);
//      data.modifyDate = this.formatDate2Time(data.modifyDate);
//      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
//      return data;
//    },
  }
};
</script>
